<!-- 商品统计 -->
<template>
  <div>
    <h2 style="color: #595959; margin-bottom: 20px">
      {{ $t("messages.ProductStats") }}
    </h2>
    <span>时间查询</span>
    <el-date-picker
      style="margin-right: 10px"
      v-model="dataValue"
      type="daterange"
      range-separator="至"
      start-placeholder="2023-01-20"
      end-placeholder="2023-09-10"
      :size="size"
    />
    <el-button type="primary" @click="getTimeData">查询</el-button>
    <!-- 柱形图 -->
    <div ref="barChart" style="width: 100%; height: 500px"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getGoodstotal } from "@/api/index.js";
import * as echarts from "echarts";
import { format } from "date-fns"; // 日期工具库
import { ElMessage } from "element-plus";

// 定义一个 ref 引用，用于指向柱形图容器
const barChart = ref(null);
const categories = ref([]);
const totalSells = ref([]);
const dataValue = ref("");

const getTimeData = () => {
  if (!dataValue.value || !dataValue.value[0] || !dataValue.value[1]) {
    ElMessage.warning("请选择时间");
    return;
  }
  dataValue.value = JSON.stringify(
    Object.values(dataValue.value).map(
      (date) => format(date, "yyyy-MM-dd HH:mm:ss") // 格式化为 "yyyy-MM-dd HH:mm:ss"
    )
  );

  getGoodstotalFn(dataValue.value);
};

// 获取商品统计数据
const getGoodstotalFn = async (date) => {
  categories.value = [];
  totalSells.value = [];
  const res = await getGoodstotal({
    date: date,
  });
  console.log("🚀 ~res:", res);

  res.data.forEach((item) => {
    categories.value.push(item.category);
    totalSells.value.push(item.totalSell);
  });

  if (res.data.length === 0) {
    ElMessage.warning("暂无数据");
  } else {
    ElMessage.success("加载商品数据成功");
  }

  // 渲染柱形图
  renderBarChart(categories, totalSells);
};

// 渲染柱形图
const renderBarChart = (categories, totalSells) => {
  if (!barChart.value) return; // 确保 DOM 元素已渲染
  const chart = echarts.init(barChart.value); // 初始化 ECharts 图表
  chart.clear();
  window.addEventListener("resize", () => {
    chart.resize();
  });

  const option = {
    tooltip: {
      trigger: "axis",
    },

    xAxis: {
      type: "category",
      data: categories.value, // x 轴数据（商品分类）
      axisLabel: {
        // rotate: 45, // 旋转标签
        interval: 0, // 显示所有标签
      },
    },
    yAxis: {
      name: "元", // 设置 Y 轴的标题为“元”
      type: "value",
      axisLabel: {
        formatter: "{value}",
      },
      min: 0,
      max: 1500,
      interval: 300, // y 轴显示的刻度
    },
    series: [
      {
        data: totalSells.value, // y 轴数据（销售总额）
        type: "bar", // 设置为柱形图
        itemStyle: {
          color: "#d14f44", // 设置柱形图颜色
        },
        barWidth: "40%", // 设置柱子的宽度，可以是像素数（例如: 40）或者百分比（例如: '50%'）
      },
    ],
  };

  chart.setOption(option); // 设置图表配置项
};

// 在组件挂载后获取数据
onMounted(() => {
  getGoodstotalFn(`["2023-01-20 00:00:00", "2023-09-10 00:00:00"]`);
});
</script>

<style scoped>
/* 你可以根据需要调整柱形图容器的宽高 */

span {
  color: rgb(67, 67, 67);
  margin-right: 10px;
}
</style>
